@use 'variables' as *;

// 消息行
.message-row {
  display: flex;
  margin-bottom: $spacing-lg;
  align-items: flex-start;

  &.user {
    justify-content: flex-end;
  }

  &.llm {
    justify-content: flex-start;
  }
}

// 头像容器
.avatar-container {
  margin: 0 $spacing-sm;
}

// 头像
.avatar {
  width: $avatar-size;
  height: $avatar-size;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: $font-size-medium;
  color: white;
}

.user-avatar {
  background-color: var(--gray-color);
}

.ai-avatar {
  background-color: var(--primary-color);
}

// 消息内容包装器
.message-content-wrapper {
  max-width: 80%;
  min-width: 0; // 允许子元素收缩
}

// 消息卡片
.message-card {
  width: 100%;
  border-radius: $border-radius;
  box-shadow: $card-shadow;
  position: relative;
  overflow: hidden; // 防止内容溢出

  .message-row.user & {
    background-color: var(--user-bubble);
    border: 1px solid var(--border-color);
  }

  .message-row.llm & {
    background-color: var(--ai-bubble);
    border: 1px solid var(--border-color);
  }
}

// 模型标签
.model-tag {
  display: inline-block;
  font-size: $font-size-small;
  color: var(--text-color);
  background-color: var(--sidebar-hover);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  margin-bottom: 5px;
}

// 消息内容
.message-content {
  color: var(--text-color);
  word-wrap: break-word; // 允许长单词折行
  word-break: break-word; // 在合适的位置折断单词
  overflow-wrap: break-word; // 现代浏览器的折行属性

  // 确保所有内容都能正确折行
  p, h1, h2, h3, h4, h5, h6, ul, ol, blockquote, table {
    max-width: 100%;
    overflow-wrap: break-word;
  }

  // 确保图片不会溢出
  img {
    max-width: 100%;
    height: auto;
  }

  // 错误操作区域
  .error-action {
    margin-top: $spacing-md;
    text-align: center;

    .open-settings-btn {
      background-color: $primary-color;
      color: white;
      border: none;
      padding: $spacing-xs $spacing-md;
      border-radius: 4px;
      cursor: pointer;
      font-size: $font-size-normal;
      transition: background-color 0.2s;

      &:hover {
        background-color: darken($primary-color, 10%);
      }
    }
  }
}

// 加载指示器
.loading-indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary-color);
  margin: $spacing-lg 0;
  gap: $spacing-sm;
}
